import React from 'react'
import { Card, Form, Row, Col, Input, Button } from 'antd'
import uStyle from './index.less'
import { connect } from 'react-redux'
import { getUInfo } from '../../../session/session'
import { editUserInfo } from '../../action/action'

const FormItem = Form.Item
const formItemLayout = {
  labelCol: {
    xs: { span: 18 },
    sm: { span: 4 },
  },
  wrapperCol: {
    xs: { span: 18 },
    sm: { span: 12 },
  },
}

class UserInfo extends React.PureComponent {
  form = React.createRef()

  componentDidMount () {
    const userInfo = JSON.parse(getUInfo())
    this.form.current.setFieldsValue(userInfo)
  }

  edit = () => {
    const { dispatch } = this.props
    this.form.current.validateFields().then(values => {
      const { version } = JSON.parse(getUInfo())
      values.version = version
      dispatch(editUserInfo(values))
    })
  }

  render () {
    const { height } = this.props
    return (
      <Card className={uStyle.card} style={{ height: height - 20, width: '1200px' }}>
        <Form ref={this.form} style={{}}>
          <Row>
            <Col span={23}>
              <FormItem {...formItemLayout} label="学号"
                        name="readerId"
              >
                <Input autoComplete="off"
                       disabled={true}
                       style={{ width: '400px', backgroundColor: '#fff', border: '1px solid #96c1e8' }}/>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={23}>
              <FormItem {...formItemLayout} label="姓名"
                        name="name"
              >
                <Input autoComplete="off"
                       style={{ width: '400px', backgroundColor: '#fff', border: '1px solid #96c1e8' }}/>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={23}>
              <FormItem {...formItemLayout} label="性别"
                        name="sex"
              >
                <Input autoComplete="off"
                       style={{ width: '400px', backgroundColor: '#fff', border: '1px solid #96c1e8' }}/>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={23}>
              <FormItem {...formItemLayout} label="生日"
                        name="birth"
              >
                <Input autoComplete="off"
                       style={{ width: '400px', backgroundColor: '#fff', border: '1px solid #96c1e8' }}/>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={23}>
              <FormItem {...formItemLayout} label="地址"
                        name="address"
              >
                <Input autoComplete="off"
                       style={{ width: '400px', backgroundColor: '#fff', border: '1px solid #96c1e8' }}/>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={23}>
              <FormItem {...formItemLayout} label="电话"
                        name="telcode"
              >
                <Input autoComplete="off"
                       style={{ width: '400px', backgroundColor: '#fff', border: '1px solid #96c1e8' }}/>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={23}>
              <FormItem {...formItemLayout} label="QQ"
                        name="qq"
              >
                <Input autoComplete="off"
                       style={{ width: '400px', backgroundColor: '#fff', border: '1px solid #96c1e8' }}/>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={23}>
              <FormItem {...formItemLayout} label="微信"
                        name="weixin"
              >
                <Input autoComplete="off"
                       style={{ width: '400px', backgroundColor: '#fff', border: '1px solid #96c1e8' }}/>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={23} offset={4}>
              <FormItem {...formItemLayout} label=""
                        name="edit"
              >
                <Button className={uStyle.button} onClick={this.edit}>修改</Button>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </Card>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    tableData: state.get('getBookInfoTableData'),
    height: state.get('getHeight')
  }
}
export default connect(mapStateToProps)(UserInfo)